{% extends "admin/base.html" %}

{% block title %}联系方式管理{% endblock %}

{% block page_title %}联系方式管理{% endblock %}

{% block content %}
<div class="card shadow-sm">
    <div class="card-header bg-white" style="display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #e9ecef;">
        <h2 class="h4 mb-0 font-weight-bold text-gray-800">联系方式列表</h2>
        <div>
            <button type="button" class="btn btn-danger btn-sm" id="batchDeleteBtn" disabled style="margin-right: 10px; padding: 6px 12px;">
                <i class="fa fa-trash mr-1"></i> 批量删除
            </button>
            <a href="/admin/contacts/add" class="btn btn-primary btn-sm">
                <i class="fa fa-plus mr-1"></i> 添加联系方式
            </a>
        </div>
    </div>
    <div class="card-body p-0">
        {% if contacts %}
        <form id="batchDeleteForm" action="/admin/contacts/batch-delete" method="post">
        <div class="table-responsive">
        <table class="table table-hover table-sm mb-0">
            <thead class="thead-light">
                <tr>
                    <th style="width: 40px; padding-left: 20px;">
                        <input type="checkbox" id="selectAll" class="form-check-input">
                    </th>
                    <th style="width: 60px;">ID</th>
                    <th style="width: 150px;">名称</th>
                    <th style="width: 120px;">类型</th>
                    <th>链接</th>
                    <th style="width: 150px;">图标预览</th>
                    <th style="width: 220px;">状态</th>
                    <th style="width: 150px; text-align: center;">操作</th>
                </tr>
            </thead>
            <tbody>
                {% for contact in contacts %}
                <tr class="transition-all hover:bg-gray-50" style="transition: background-color 0.2s;">
                    <td style="padding-left: 20px;">
                        <input type="checkbox" name="contact_ids" value="{{ contact.id }}" class="contact-checkbox form-check-input">
                    </td>
                    <td class="text-muted">{{ contact.id }}</td>
                    <td class="font-medium">{{ contact.name }}</td>
                    <td>
                        <span class="badge rounded-pill bg-primary">
                            {{ contact.type }}
                        </span>
                    </td>
                    <td class="text-truncate" style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                        <a href="{{ contact.url }}" target="_blank" class="text-primary hover:underline" title="{{ contact.url }}">{{ contact.url }}</a>
                    </td>
                    <td class="text-center">
                        <i class="{{ contact.icon }}" style="font-size: 24px;"></i>
                    </td>
                    <td>
                        {% if contact.status %}
                        <span style="color: #2ecc71;">启用</span>
                        <button type="button" class="btn btn-xs btn-warning toggle-status-btn" data-id="{{ contact.id }}" data-status="{{ contact.status }}" style="margin-left: 5px;">
                            禁用
                        </button>
                        {% else %}
                        <span style="color: #e74c3c;">禁用</span>
                        <button type="button" class="btn btn-xs btn-success toggle-status-btn" data-id="{{ contact.id }}" data-status="{{ contact.status }}" style="margin-left: 5px;">
                            启用
                        </button>
                        {% endif %}
                    </td>
                    <td style="text-align: center;">
                        <a href="/admin/contacts/edit/{{ contact.id }}" class="btn btn-secondary btn-sm mr-2" title="编辑">
                            <i class="fa fa-edit mr-1"></i> 编辑
                        </a>
                        <button type="button" class="btn btn-danger btn-sm delete-btn" data-id="{{ contact.id }}" title="删除">
                            <i class="fa fa-trash mr-1"></i> 删除
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        </form>
        
        <!-- 分页控件 -->
        <div class="pagination-container mt-3 text-right">
            <div class="btn-group d-inline-block">
                {% if current_page == 1 %}
                <button class="btn btn-default btn-sm disabled" disabled>首页</button>
                <button class="btn btn-default btn-sm disabled" disabled>上一页</button>
                {% else %}
                <a href="/admin/contacts?page={{ 1 }}" 
                   class="btn btn-default btn-sm">
                    首页
                </a>
                <a href="/admin/contacts?page={{ current_page - 1 }}" 
                   class="btn btn-default btn-sm">
                    上一页
                </a>
                {% endif %}
                {% for i in range(1, total_pages + 1) %}
                    {% if i == current_page %}
                        <a href="/admin/contacts?page={{ i }}" 
                           class="btn btn-primary btn-sm">{{ i }}</a>
                    {% else %}
                        <a href="/admin/contacts?page={{ i }}" 
                           class="btn btn-default btn-sm">{{ i }}</a>
                    {% endif %}
                {% endfor %}
                {% if current_page == total_pages %}
                <button class="btn btn-default btn-sm disabled" disabled>下一页</button>
                <button class="btn btn-default btn-sm disabled" disabled>末页</button>
                {% else %}
                <a href="/admin/contacts?page={{ current_page + 1 }}" 
                   class="btn btn-default btn-sm">
                    下一页
                </a>
                <a href="/admin/contacts?page={{ total_pages }}" 
                   class="btn btn-default btn-sm">
                    末页
                </a>
                {% endif %}
            </div>
        </div>
        
        <!-- 引入联系方式管理相关脚本 -->
        <script src="/static/js/admin/contacts.js"></script>

        {% else %}
        <div class="text-center py-8 px-4">
            <i class="fa fa-address-card-o" style="font-size: 48px; color: #ccc; margin-bottom: 16px;"></i>
            <h3 class="text-gray-500 mb-2">暂无联系方式</h3>
            <p class="text-gray-400 mb-4">您还没有添加任何联系方式</p>
            <a href="/admin/contacts/add" class="btn btn-primary">
                <i class="fa fa-plus mr-1"></i> 添加第一个联系方式
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}